<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>sy</title>
    <link rel="stylesheet" href="../../static/Semantic-UI-master/dist/semantic.min.css" th:href="@{/Semantic-UI-master/dist/semantic.min.css}">
    <link rel="stylesheet" href="../../static/css/custom.css" th:href="@{/css/custom.css}">
</head>
<body class="login-background">
<input hidden id="error" type="text" value="" th:value="${session.message}">
<!--头部导航-->
<nav class="ui attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui menu secondary font-size-middle font-y-center">

            <span class="ui teal header item">
                <img src="/imges/1.png" th:src="@{/imges/1.png}"  class="image-size-mini"/>
            </span>
            <a class="item" th:href="@{/}"><i class="home icon"></i>首页</a>
            <a class="item" href="syclass.html" th:href="@{/sy/syuser/syclass}"><i class="building icon"></i>sy课堂</a>
            <a class="item" href="aboutwe.html" th:href="@{/sy/syuser/aboutwe}"><i class="info icon"></i>关于我们</a>

            <a onClick="join('注册','/sy/syuser/goregistered','10001','600','350')" href="javascript:;" class="item right">注册</a>

        </div>

    </div>
</nav>
<!--登录表单-->

<div class="ui container m-padded-tb-max"  style="max-width: 35em !important;">
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <h2 class="ui teal image header">
                <img src="/imges/1.png" th:src="@{/imges/1.png}" class="image image-size-mini"/>
                <div class="content"><trans oldtip=" Log-in to your account " newtip="登录到您的帐户" style="">登录到您的帐户</trans></div>
            </h2>
            <form class="ui large form" action="/sy/syuser/userlogin" method="post" id="loginfrom">
                <div class="ui stacked segment">
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="username" placeholder="请输入用户名" id="username">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" autocomplete="off" name="password" placeholder="请输入密码" id="password">
                        </div>
                    </div>
                    <button class="ui fluid large submit teal button" id="btn">登录</button>
                    <p></p>
                    <p><a href="javascript:void(0);" id="findpwd">忘记密码了？</a></p>
                </div>
                <div th:if="${session.message=='1'}">
                    <div class="ui message" id="message">
                        <strong style='color: indianred'>用户名或密码不能为空</strong>
                    </div>
                </div>
                <div th:if="${session.message=='2'}">
                    <div class="ui message" id="">
                        <strong style='color: indianred'>用户名或密码错误</strong>
                    </div>
                </div>
            </form>

            <div class="ui message"><trans oldtip=" New to us? " newtip="对我们来说是新的吗？">对我们来说是新的吗？</trans><a href="/sy/syuser/goregistered"><trans oldtip="Sign Up" newtip="注册">注册</trans></a>
            </div>
            <div class="ui message"><a href="/sy/syadmin/admin"><trans oldtip="Sign Up" newtip="测试链接">去管理</trans></a>
            </div>
        </div>
    </div>
</div>

<!--footer-->
<footer class="ui vertical segment b-color m-padded-tb-big">
    <div class="ui container">
        <div class="ui grid">
            <div class="eight wide column">
                <a class="item" th:href="@{/sy/syuser/aboutwe}">关于我们</a><br><br><br>
                <span class="ui teal header" style="display: inline;">
                        <img src="/imges/1.png" th:src="@{/imges/1.png}"/></span>
                <span class="font-tmd">&nbsp;生命可以随心所欲，但不可以随波逐流。</span>
            </div>

            <div class="eight wide column font-tmd">
                计科172 梁瑜<br>
                2020/10/28
            </div>
        </div>
    </div>
</footer>
</body>
<script src="../../static/Semantic-UI-master/dist/semantic.min.js" th:src="@{/Semantic-UI-master/dist/semantic.min.js}"></script>
<script src="../../static/js/jquery-1.12.4.min.js" th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script src="../../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../../static/js/sy.min.js" th:src="@{/js/sy.min.js}"></script>
<script type="text/javascript" src="../../static/lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script>

<script type="text/javascript">
    //开启小窗口
    function join(title,url,id,w,h){
        layer_show(title,url,w,h);
    }
    $("#findpwd").click(function () {
        layer.open({
            type: 2,
            content: '/sy/syuser/findpassword',
            title: '密码找回',
            area: ['450px','350px'],
            end: function () {
                location.reload();
            }
        })
    })
</script>
</html>